<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<!-- 定位:将元素正确布局 
		     1浮动定位:左右布局
			 2相对定位:微调布局针对单一元素
			    position:relative;   声明元素进行相对定位
			   特点:相对与父级进行定位,不脱离文档流
			   附加属性:方向属性:left,top,right,bottom
			   属性值:正负数值px
			         Z叠加属性:z-index--属性值:数值,数值越大越靠前
			 3绝对定位:叠加效果,通常与相对定位搭配使用,左栏,侧边栏,遮罩层
			          左栏--挂靠点
				position:absolut;声明元素进行绝对定位
			   特点:相对于祖先[页面左上角]进行定位,
			        如果有父元素按照父元素[坐上顶角],脱离文档流
			   使用方法:通常与相对定位搭配使用
			 4固定定位:fiexd  页面区域固定到页面上
			    绝对,固定属性--附加属性全部通用:方向,叠加属性
			 5文档流定位:按照元素分类进行定位:块与块[纵排]
			                               行与行[横排]
										   块与行[横排]
		-->
		<style>
			/* .box1和box2 宽高300*300  背景颜色  加相对定位*/
			div{
				width: 300px;
				height: 300px;
			}
			div.box1{
				background: url(img/懒羊羊.png);
				background-size: 100%;
				/* 相对定位,相对就近父级 */
				position: absolute;
				left: 0px;
				top: 0px;
				/* 叠加属性 */
				z-index: 2;
			}
			div.box2{
				background: url(img/4 (1).png);
				background-size: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>